import echarts from "echarts";
// import * as echarts from "echarts/core";
// 按需引入方式
// import echarts from '@/views/package/echarts/components/BaseEcharts/utils/echarts'
export function getOptions() {
  const stMin = 150;
  const stMax = 230;
  const ygMin = 0;
  const ygMax = 720;
  const stSplit = 1;
  const ygSplit = 5;

  const xData = [];
  const yData = [];

  for (let y = stMin; y < stMax + stSplit; y += stSplit) {
    yData.push(y);
  }

  for (let x = ygMin; x < ygMax; x += ygSplit) {
    xData.push(x);
  }
  let mapData = [];
  for (let x = ygMin; x < ygMax + ygSplit; x += ygSplit) {
    for (let y = stMin; y < stMax + stSplit; y += stSplit) {
      const xIndex = (x - ygMin) / ygSplit;
      const yIndex = (y - stMin) / stSplit;
      mapData.push([xIndex, yIndex, Math.random().toFixed(4)]);
    }
  }
  console.log("xData", xData);
  console.log("yData", yData);
  console.log("mapData", mapData);
  let windData = [];

  let series = [
    // 热力图
    {
      name: "xx热力图",
      type: "heatmap",
      emphasis: {
        itemStyle: { borderColor: "#33333350", borderWidth: 0.5 },
      },
      tooltip: {
        formatter: (params) => {
          // console.log("params", params.value);
          let { value, color } = params;
          const x = value[0];
          const y = value[1];
          return `<span style="font-size:13px;"><b>网格详情</b><br>水头：${
            y * stSplit + stMin
          }m - ${(y + 1) * stSplit + stMin}m<br>有功：${
            x * ygSplit + ygMin
          }kW - ${
            (x + 1) * ygSplit + ygMin
          }kW<br><span ;font-size:13px;">网格占有率:</span>${value[2]}%</span>`;
        },
      },
      data: mapData,
    },
    {
      name: "XY折线图",
      type: "line",
      smooth: true,
      data: [
        [0, 15],
        [1, 11],
        [2, 15],
        [3, 15],
        [4, 15],
        [5, 15],
        [6, 13],
        [7, 15],
        [8, 13],
        [9, 13],
        [10, 13],
      ],
    },
  ];

  const option = {
    backgroundColor: "#cccccc20",
    title: {
      text: "Demo Chart",
      subtext: "2021-05-01 04:00 - 2021-05-01 07:54",
      left: "center",
      top: "2%",
    },
    grid: {
      top: "12%",
      bottom: "12%",
      left: "8%",
      right: "8%",
    },
    tooltip: {
      axisPointer: { type: "cross", label: { show: false } },
    },
    // legend: {
    //   top: '8%',
    //   textStyle: { color: '#000000', fontSize: 13, fontWeight: 'bold' }
    // },
    toolbox: {
      show: true,
      right: "3%",
      top: "4%",
      feature: {
        // 还原
        restore: {},
        // 保存为图片
        saveAsImage: {
          // 忽略工具栏、区域缩放组件
          excludeComponents: ["toolbox", "dataZoom"],
        },
      },
      // 工具栏icon颜色
      // iconStyle: { borderColor: '#666' }
    },
    xAxis: [
      {
        type: "category",
        axisLabel: {
          textStyle: { color: "#000000", fontSize: 13, fontWeight: "bold" },
        },
        axisLine: { lineStyle: { color: "#000000", width: 2 } },
        splitLine: {
          show: true,
          lineStyle: { type: "dashed", color: "#70707030" },
        },
        z: 3,
        data: xData,
      },
      {
        show: false,
        axisPointer: { show: false },
        min: 0,
        max: xData.length,
      },
      {
        axisLine: { lineStyle: { color: "#000000", width: 2 } },
        z: 4,
      },
    ],
    yAxis: [
      {
        name: "水头(m)",
        nameLocation: "center",
        nameGap: 48,
        nameTextStyle: { color: "#000000", fontSize: 14 },
        type: "category",
        axisLabel: {
          textStyle: { color: "#000000", fontSize: 13, fontWeight: "bold" },
        },
        axisLine: { lineStyle: { color: "#000000", width: 2 } },
        splitLine: {
          show: true,
          lineStyle: { type: "dashed", color: "#70707030" },
        },
        z: 3,
        data: yData,
      },
      {
        show: false,
        axisPointer: { show: false },
        min: 0,
        max: yData.length,
      },
      {
        axisLine: { lineStyle: { color: "#000000", width: 2 } },
        z: 4,
      },
    ],
    visualMap: {
      right: "3.4%",
      top: "center",
      min: 0,
      max: 1,
      calculable: true,
      realtime: false,
      seriesIndex: 0,
      itemWidth: 16,
      itemHeight: 240,
      formatter: function (value) {
        return  value*100 +'%'; // 范围标签显示内容。
      },
      inRange: {
        color: [
          "#ffffff",
          "#d7e3ff",
          "#b5c9ff",
          "#8fb3ff",
          "#7e97ff",
          "#6270f7",
          "#0062ff",
          "#009797",
          "#00c732",
          "#62ff00",
          "#97ff00",
          "#c7ff32",
          "#ffff00",
          "#ffa100",
          "#fb7900",
        ],
      },
      textStyle: { fontWeight: "bold" },
    },
    dataZoom: [
      {
        type: "slider",
        xAxisIndex: [0, 1],
        filterMode: "empty",
        height: 26,
        bottom: "2.8%",
        // start: 0,
        // end: 50
      },
      {
        type: "slider",
        yAxisIndex: [0, 1],
        filterMode: "empty",
        width: 26,
        right: "1.2%",
        // start: 0,
        // end: 70,
      },
      {
        type: "inside",
        xAxisIndex: [0, 1],
        filterMode: "empty",
      },
      {
        type: "inside",
        yAxisIndex: [0, 1],
        filterMode: "empty",
      },
    ],
    series: series,
  };

  return option;
}
